<template>
	<scroll-view class="borderBox book-chapter" scroll-y :scroll-into-view="scrollId" 
		scroll-with-animation>
		<li class="flex list" v-for="(item,i) in dataList" :key='i' :id="'item'+i"
			:class="bookIndex==i?'active':''"
			@click.stop="seeZhangjie(i)">
			<div class="left-div">
				{{i+1}}. {{item.title}}
			</div>
			<i class="iconfont icon-xiangyou"></i>
		</li>
	</scroll-view>
</template>

<script>
import {setLocalStorage} from '@/utils/index';
import {mapGetters,mapActions} from 'vuex';
export default{
	data(){
		return{
			id: '', //小说id
			dataList: [],
			scrollId: '',  //滚动id
		}
	},
	computed: {
		...mapGetters('novel', ['bookIndex']),
	},
	mounted(){
		this.id = this.$mp.query.id;
		this.$store.commit('novel/GET_BOOKINDEX', this.id);
		this.getData();
	},
	methods: {
		seeZhangjie(index){
			this.$store.commit('novel/SET_BOOKINDEX', {
				id: this.id,
				index: index
			});
			let link = encodeURIComponent(this.dataList[index].link);
			let title = this.dataList[index].title;
			setTimeout(()=>{
				setLocalStorage('chapterLink', link);
				uni.navigateTo({
					url: `/pages/functions/novel/chapter_reader?title=${title}`,
					animationType: 'zoom-out'
				});
			},500);
		},
		getData(){
			this.$store.dispatch('novel/getNovelChapters', this.id)
			.then((data)=>{
				this.dataList = data;
				this.scrollId = `item${this.bookIndex}`;
			})
			.catch();
		},
	},
	onPullDownRefresh() {
		uni.stopPullDownRefresh();
		uni.hideNavigationBarLoading();
		this.getData();
	}
}
</script>

<style lang="less" scoped>
.book-chapter{
	width: 100%;
	height: 100vh;
	padding: 0 30upx;
	li.list{
		min-height: 80upx;
		justify-content: space-between;
		&.active{
			border-bottom:  1px solid #38adfd;
		}
	}
	li.list+li.list{
		border-top: 1px solid #eee;
	}
}
</style>
